<template>
  <div class="main">
    <div class="experiment">
      <div class="bars">
        <vue-file-toolbar-menu
          v-for="(content, index) in bars_content"
          :key="'bar-' + index"
          :content="content"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import VueFileToolbarMenu from "vue-file-toolbar-menu/src/Bar/Bar.vue";
import { ThinkEditorDemo } from "@/utils/ThinkEditorDemo";

import {
  E_EVENT_KEY,
  E_PAGE_NUM_SCOPE,
  E_PAGE_NUM_STYLE,
  E_PAGE_NUM_FORMAT,
  E_CHECK_FIGURE_STYLE,
  E_ALIGN_HORIZONTAL_MODE,
  E_SPECIFIC_INDENT_FORMAT,
  E_VIEW_MODE,
  E_FORMULA_STYLE,
  E_LAYOUT_VERTICAL_ALIGN,
} from "@/../public/js/ThinkEditor.Defined";

import {
  RGBA2Color,
  Color2RGBAStr,
  RGBAStr2Color,
} from "@/../public/js/ThinkEditor.Utils";

// for dynamic css variables
Vue.component("v-style", {
  render(createElement) {
    return createElement("style", this.$slots.default);
  },
});

import { ThinkEditorInstance } from "@/../public/js/ThinkEditor.Instance";
export default {
  name: "Demo",
  components: { VueFileToolbarMenu },
  props: {
    editorsInstance: ThinkEditorInstance, // 接收并展示来自父组件的值
  },
  data() {
    return {
      initial_html: "Powered by this.thinkEditor!",

      font: "宋体",
      font_color: "rgb(0, 0, 0)",
      font_size: 0.4, //单位cm
      fontSizeItem:"",
      theme: "default",
      edit_mode: true,
      check1: false,
      check2: false,
      check3: true,
      bold_state_: false,
      italic_state_: false,
      strikethrough_state_: false,
      underline_state_: false,
      thinkEditor: undefined,
      thinkEditorDemo: undefined,
    };
  },
  created() {
    this.thinkEditor = this.editorsInstance.GetLastEditor();
    console.log("this.thinkeditor", this.thinkEditor);
    this.editorsInstance.addEventListener(
      E_EVENT_KEY.docEditorFocus,
      this.OnDocEditorFocusChange
    );

    this.editorsInstance.addEventListener(
      E_EVENT_KEY.fontFormat,
      this.OnFontFormatChange
    );
  },
  computed: {
    // Read the API documentation about the available menu content options

    bars_content() {
      const mac_os_menus =
        this.theme == "mac-os"
          ? [
              {
                html: '<svg width="16" height="16" viewBox="0 0 16 16" style="fill: var(--bar-font-color, black)" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"/></svg>',
                menu: [
                  {
                    text: "Log Out",
                    hotkey: "shift+command+q",
                    click: () => alert("No way!"),
                  },
                ],
              },
              {
                html: '<span style="font-weight:700">YourApp</span>',
                menu: [
                  {
                    text: "Quit",
                    hotkey: "command+q",
                    click: () => alert("No way!"),
                  },
                ],
              },
            ]
          : [];

      return [
        [
          ...mac_os_menus,
          {
            text: "文件",
            menu: [
              { text: "打开", click: () => this.thinkEditorDemo.OpenDoc() },
              {
                text: "新建病历",
                click: () => this.thinkEditorDemo.NewEntityDoc(),
              },
              {
                text: "新建模板",
                click: () => this.thinkEditorDemo.NewTemplateDoc(),
              },
              {
                text: "新建TimeAxis",
                click: () => this.thinkEditorDemo.NewTimeAxis(),
              },
              { is: "separator" },
              {
                text: "保存...",
                click: () => this.thinkEditorDemo.SaveToXml(),
              },

              {
                text: "保存PDF视图...",
                click: () => this.thinkEditorDemo.SaveToPdfView(),
              },
              {
                text: "保存PDF...",
                click: () => this.thinkEditorDemo.SaveToPdf(),
              },
              {
                text: "保存HTML...",
                click: () => this.thinkEditorDemo.SaveToHtml(),
              },
              { is: "separator" },
              {
                text: "打印...",
                click: () =>
                  this.thinkEditor.SetViewMode(E_VIEW_MODE.Print, {}),
              },
              // { is: "separator" },
              //{ text: "关闭",  click () {if (confirm("Do you want to close the page?")) window.close(); },
              //},
            ],
          },
          /*{
            text: "Edit",
            menu: [web版复制粘贴要走系统事件
              { text: "Cut", click: () => this.thinkEditor.Cut() },
              { text: "Copy", click: () => this.thinkEditor.Copy() },
              { text: "Paste", click: () => this.thinkEditor.Paste(E_PASTE_TYPE.Normal) },
            ],
          },*/
          {
            text: "插入",
            menu: [
              {
                text: "元素",
                click: () => this.thinkEditorDemo.InsertElement(),
              },
              {
                text: "选框",
                click: () =>
                  this.thinkEditor.InsertCheckBox({
                    id: "",
                    weight: 0,
                    content: "选框示例",
                    checkFigureStyle: E_CHECK_FIGURE_STYLE.STYLE_1,
                  }),
              },
              {
                text: "公式",
                click: () =>
                  this.thinkEditor.InsertFormula({
                    id: "",
                    style: E_FORMULA_STYLE.MensesStyle_1,
                    alignVerticalLayout: E_LAYOUT_VERTICAL_ALIGN.OtherMiddle,
                  }),
              },
              {
                text: "表格",
                click: () =>
                  this.thinkEditor.InsertTable({ rowsCount: 3, colsCount: 3 }),
              },
              { text: "图像", click: () => this.thinkEditorDemo.InsertImage() },
              {
                text: "选择图像",
                click: () => this.thinkEditorDemo.SelectImage(),
              },
              {
                text: "页码",
                click: () =>
                  this.thinkEditor.InsertPageNum({
                    scope: E_PAGE_NUM_SCOPE.WholeDocnment,
                    style: E_PAGE_NUM_STYLE.OrderListModel_0,
                    format: E_PAGE_NUM_FORMAT.PageOrderPagesCountFormat,
                  }),
              },
              {
                text: "二维码",
                click: () => this.thinkEditorDemo.InsertQRCode(),
              },
              {
                text: "条形码",
                click: () => this.thinkEditorDemo.InsertBarCode(),
              },
              {
                text: "分页符",
                click: () => this.thinkEditor.InsertPageFeed(1),
              },
            ],
          },
          {
            text: "功能",
            menu: [
              { text: "test1", click: () => this.thinkEditorDemo.Test1() },
              { text: "test2", click: () => this.thinkEditorDemo.Test2() },
              {
                text: "撤销签名",
                click: () => this.thinkEditorDemo.CancelSign(),
              },
              {
                text: "插入模板片段",
                click: () =>
                  this.thinkEditorDemo.InsertFragment("HunFouFragment.xml"),
              },
              {
                text: "追加模板片段",
                click: () =>
                  this.thinkEditorDemo.AppendFragment("BingChengFragment.xml"),
              },
              {
                text: "自定义菜单",
                click: () => this.thinkEditorDemo.SetUserDefinedMenuDemo(),
              },
            ],
          },

          {
            text: "Help",
            menu: [
              {
                text: "About",
                icon: "help",
                click: () =>
                  alert(
                    "成都屹爱信息科技-信译(this.thinkEditor)跨平台电子病历编辑器领航者！"
                  ),
              },
              { is: "separator" },
              {
                text: "API",
                icon: "exit_to_app",
                click: () =>
                  window.open(
                    "http://thinkeditor.com:8181/docs/thinkeditor-manual/thinkeditor-manual-enter"
                  ),
              },
            ],
            menu_width: 220,
          },
          /*
          { is: "spacer" },
          {
            icon: this.edit_mode ? "lock_open" : "lock",
            title: "Toggle edit mode",
            active: !this.edit_mode,
            click: () => {
              this.edit_mode = !this.edit_mode;
            },
          },*/
        ],
        [
          {
            icon: "format_align_left",
            title: "Align left",
            hotkey: this.isMacLike ? "shift+command+l" : "ctrl+shift+l",
            click: () =>
              this.thinkEditor.SetParagraphAlignContent(
                E_ALIGN_HORIZONTAL_MODE.Left
              ),
          },
          {
            icon: "format_align_center",
            title: "Align center",
            hotkey: this.isMacLike ? "shift+command+e" : "ctrl+shift+e",
            click: () =>
              this.thinkEditor.SetParagraphAlignContent(
                E_ALIGN_HORIZONTAL_MODE.Center
              ),
          },
          {
            icon: "format_align_right",
            title: "Align right",
            hotkey: this.isMacLike ? "shift+command+r" : "ctrl+shift+r",
            click: () =>
              this.thinkEditor.SetParagraphAlignContent(
                E_ALIGN_HORIZONTAL_MODE.Right
              ),
          },
          {
            icon: "format_align_justify",
            title: "Justify content",
            hotkey: this.isMacLike ? "shift+command+j" : "ctrl+shift+j",
            click: () =>
              this.thinkEditor.SetParagraphAlignContent(
                E_ALIGN_HORIZONTAL_MODE.Justify
              ),
          },
          { is: "separator" },
          {
            icon: "format_bold",
            title: "Bold",
            active: this.bold_state_,
            //hotkey: this.isMacLike ? "command+b" : "ctrl+b",
            click: () => {
              this.bold_state_ = !this.bold_state_;
              this.thinkEditor.SetFontBold(this.bold_state_);
            },
          },
          {
            icon: "format_italic",
            title: "Italic",
            active: this.italic_state_,
            //hotkey: this.isMacLike ? "command+i" : "ctrl+i",
            click: () => {
              this.italic_state_ = !this.italic_state_;
              this.thinkEditor.SetFontItalic(this.italic_state_);
            },
          },
          {
            icon: "format_underline",
            title: "Underline",
            active: this.underline_state_,
            //hotkey: this.isMacLike ? "command+u" : "ctrl+u",
            click: () => {
              this.underline_state_ = !this.underline_state_;
              this.thinkEditor.SetFontUnderline(this.underline_state_);
            },
          },
          {
            icon: "format_strikethrough",
            title: "Strike through",
            active: this.strikethrough_state_,
            click: () => {
              this.strikethrough_state_ = !this.strikethrough_state_;
              this.thinkEditor.SetFontStrikethrough(this.strikethrough_state_);
            },
          },
          {
            is: "button-color",
            type: "compact",
            menu_class: "align-center",
            stay_open: false,
            color: this.font_color,
            update_color: (new_color) => {
              this.font_color = new_color;
              this.thinkEditor.SetFontColor(RGBA2Color(this.font_color.rgba));
            },
          },
          { is: "separator" },
          {
            html:
              '<div class="ellipsis" style="width: 80px; font-size: 95%;">' +
              this.font+
              "</div>",
            title: "Font",
            chevron: true,
            menu: this.font_menu,
            menu_height: 200,
          },
          {
            icon: "exposure_plus_1",
            title: "增加字号",
            click: () => {
              this.font_size += 0.05;
              this.thinkEditor.SetFontSize(this.font_size);
            },
          },
          {
            icon: "exposure_neg_1",
            title: "减少字号",
            click: () => {
              this.font_size -= 0.05;
              if (this.font_size < 0.05) {
                this.font_size = 0.05;
              }
              this.thinkEditor.SetFontSize(this.font_size);
            },
          },
          /*
          { is: "separator" },
          {
            icon: "format_list_numbered",
            title: "Numbered list",
            click: () => this.thinkEditor.SetParagraphListMode(E_LIST_MODEL.OrderListModel_0),
          },
          {
            icon: "format_list_bulleted",
            title: "Bulleted list",
            click: () => this.thinkEditor.SetParagraphListMode(E_LIST_MODEL.SymbolListModel_0),
          },*/
          { is: "separator" },
          {
            icon: "format_indent_increase",
            title: "Increase indent",
            click: () =>
              this.thinkEditor.SetParagraphSpecificIndentFormat(
                E_SPECIFIC_INDENT_FORMAT.NoIndent
              ),
          },
          {
            icon: "format_indent_decrease",
            title: "Decrease indent",
            click: () =>
              this.thinkEditor.SetParagraphSpecificIndentFormat(
                E_SPECIFIC_INDENT_FORMAT.FristLine
              ),
          },
          { is: "separator" },
          {
            icon: "format_clear",
            text: "Clear",
            title: "Clear format",
            click: () => this.thinkEditor.ClearFormat(),
          },

          { is: "separator" },
          {
            icon: "lock",
            title: "内容锁定",
            click: () => this.thinkEditor.SetSelectContentLock(true),
          },
          {
            icon: "lock_open",
            title: "内容解锁",
            click: () => this.thinkEditor.SetSelectContentLock(false),
          },
        ],
      ];
    },

    isMacLike: () => /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),
    font_menu() {
      return this.font_list.map((font) => {
        return {
          html:
            '<span class="ellipsis" style="font-family:' +
            font +
            '">' +
            font +
            "</span>",
          icon: this.theme != "default" && this.font == font ? "check" : false,
          active: this.font == font,
          height: 20,
          click: () => {
            this.thinkEditor.SetFontType(font);
            this.font = font;
          },
        };
      });
    },
    font_list: () => [
      "宋体",
      "楷体",
      "黑体",
      "仿宋",
      "Garamond",
      "Arial",
      "Avenir",
      "Courier New",
      "Garamond",
      "Georgia",
      "Impact",
      "Helvetica",
      "Palatino",
      "Roboto",
      "Times New Roman",
      "Verdana",
    ],
    is_touch_device: () =>
      "ontouchstart" in window || window.navigator.msMaxTouchPoints > 0,
  },

  methods: {
    focus_text() {
      // this.$refs.text.focus();
      document.execCommand("selectAll", false, null);
      document.getSelection().collapseToEnd();
    },
    OnDocEditorFocusChange(e) {
      this.thinkEditor = e.data.data;
      this.thinkEditorDemo = new ThinkEditorDemo(this.thinkEditor);
    },
    //监听 点击的字体改变的事件
    OnFontFormatChange(e) {
      //console.log(e);
      let data = e.data.data;
      //console.log(data);

      this.bold_state_ = data.bold == "0" ? false : true;
      this.italic_state_ = data.italic == "0" ? false : true;
      this.underline_state_ = data.underline == "0" ? false : true;
      this.strikethrough_state_ = data.strikethrough == "0" ? false : true;
      this.font_color = Color2RGBAStr(data.color);
      this.font = data.fontName;
      this.fontSizeItem = data.fontSizeItem
      this.font_size = parseFloat(data.size);
    },

    EventTest(e) {
      console.log(e);
    },
  },

  mounted() {
    if (!this.is_touch_device) this.focus_text();
    var canvas = document.getElementById("canvas");
    /*************************
     * 方案一：监听所有事件再分发
     * ***********************/
    //  var thinkEdtior = canvas.thinkEdtior;
    // this.thinkEditor.Init(canvas);
    // thinkEdtior.RegisterEventListener(this.EventListener);//监听所有事件
    /*************************
     * 方案二：监听特定事件
     * ***********************/
    // this.$thinkEditorManager1.addEventListener(
    //   E_EVENT_KEY.docEditorFocus,
    //   this.OnDocEditorFocusChange
    // );
    // this.$thinkEditorManager1.addEventListener(
    //   E_EVENT_KEY.fontFormat,
    //   this.OnFontFormatChange
    // );
    // this.thinkEditor = this.$thinkEditorManager1.GetCurrentEditor();
  },
};
</script>

<style scoped>
:root {
  --demo-font-color: rgb(74, 238, 164);
}
html {
  height: 100%;
  overflow-y: scroll;
  /* background-color: rgb(74, 238, 164); */
  transition-delay: 0.5s;
}
body {
  margin: 0;
  min-height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--demo-font-color);
  /* background-color: rgb(36, 44, 41); */
  /* box-shadow: inset 0 0 30vw 15vw black; */
  transition: color 0.3s, background-color 0.3s, box-shadow 0.5s;
}
::selection {
  background-color: rgba(74, 238, 164, 0.2);
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
</style>

<style scoped>
a {
  color: inherit;
}
svg.github {
  fill: var(--demo-font-color);
  margin-right: 5px;
}
*[contenteditable="true"] {
  outline: none;
}
select {
  outline: none;
}

.main {
  width: 100%;
  height: 100%;
}
.title {
  text-align: center;
  font-size: 50px;
  /* padding-top: 30px; */
}
.subtitle {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 50px;
}
.experiment {
  width: 95%;
  /* margin: auto; */
  max-width: 1150px;
}
.bars {
  /* background-color: var(--demo-bars-bkg, white);
  border-radius: var(--demo-bars-border-radius, 5px); */
  /* box-shadow: var(--demo-bars-shadow, 0 0 20px black); */
  transition: 0.5s;
}
::v-deep.bars * {
  transition: font-size 0.1s linear, padding 0.1s linear, margin 0.1s linear;
}
.styles {
  position: fixed;
  /* top: 10px; */
  right: 10px;
}
.text {
  font-family: var(--bar-font-family);
  width: 90%;
  margin: 30px auto;
  font-size: 20px;
  min-height: 250px;
  background-color: var(--demo-text-bkg-color);
  background-image: var(
    --demo-text-bkg-img,
    url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23FFFFFF30' stroke-width='2' stroke-dasharray='15' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")
  );
  border: var(--demo-text-border);
  box-shadow: var(--demo-text-box-shadow);
  padding: 10px 15px;
  transition: 0.5s;
}
</style>
